<template>
  <div class="app-container">
    <div class="layout-content">
      <keep-alive v-if="route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
    <!--底部菜单栏 -->
    <div class="layout-footer" v-if="route.meta.showTab">
      <TabBar :tabbars="tabbars" v-model="activeRoute" @change="handleChange"></TabBar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive,watch,ref } from "vue"
import { ITabBar } from "@/components/TabBar.vue"
import { useRoute,useRouter } from 'vue-router'


const route = useRoute()
console.log(route.meta,'this.$route')
const router = useRouter()
console.log(router, 'this.$router')

//定义tabbars变量
const tabbars:Array<ITabBar> = reactive([
  { title: '首页', to: '/home', icon: 'home-o' },
	{ title: '项目信息', to: '/pkgInfo', icon: 'label-o' },
	{ title: '案例', to: '/demo', icon: 'star-o' },
	{ title: '关于我', to: '/about', icon: 'user-o' }
])

const activeRoute = ref(0)
watch(activeRoute,(v) => {
  console.log('tab value v-model:', v)
})

//监听路由
watch(route, (v) => {
  console.log('route', v.name)
})

//触发事件
const handleChange = (v:number) =>{
  console.log("tab value @change:", v)
}
</script>



<style lang="scss" scoped>
.layout-tabbar {
	width: 100%;
	height: 100%;
}
</style>